<template>
  <div class="category-tab-content" v-if="subcategory.list">
    <div class="content">
      <div v-for="(item, index) in subcategory.list" :key="index" class="item">
      <a :href="item.link" class="item-link">
        <img :src="item.image" class="item-img" />
        <p class="item-text">{{ item.title }}</p>
      </a>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryTabContent",
  props: {
    subcategory: {
      type: Object,
      default() {
        return [];
      },
    },
  },
  methods: {
    imgLoad() {},
  },
};
</script>

<style scoped>
.category-tab-content {
  padding: 15px 15px 0;
}
.content {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;

}
.category-tab-content .item {
  margin-top: 10px;
  text-align: center;
}
.item-link{
  display: inline-block;
  width: 100%;
}
.category-tab-content .item .item-img {
  width: 60%;
}
.category-tab-content .item .item-text {
  margin-top: 10px;
  font-size: 14px;
}
</style>